<template>
    <div>
        <el-form label-width="auto" :model="searchData" style="max-width: 600px">
            <el-form-item label="选择商品分类">
                <el-select v-model="value" @change="changesel()" placeholder="分类" size="large" style="width: 240px">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="搜索的关键字">
                <el-input v-model="searchData.search" placeholder="请输入关键字" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getGoodsList"> 查询 </el-button>
                <el-button type="primary" @click="removelist">重置</el-button>
            </el-form-item>
            <el-form-item>
                <el-button class="loginBtn" type="primary" @click="excelToUseJson">
                    excel导出
                </el-button>
            </el-form-item>
            <el-upload ref="upload" class="upload-demo" :limit="1" :on-change="changeFn" :on-exceed="handleExceed"
                :auto-upload="false" :show-file-list="false">
                <template #trigger>
                    <el-button type="primary">excel导入</el-button>
                </template>
            </el-upload>
        </el-form>
    </div>
    <el-table :data="goodsList" style="width: 100%">
        <el-table-column prop="proid" label="编号" width="350" />
        <el-table-column prop="proname" label="名称" width="150" />
        <el-table-column prop="category" label="分类" width="150" />
        <el-table-column prop="brand" label="品牌" width="150" />
        <el-table-column label="图片" width="150">
            <template #default="scope">
                <img :src="scope.row.img2" style="width: 100px; height: 100px" />
            </template>
        </el-table-column>
    </el-table>
    <el-pagination background 
    layout="prev, pager, next"
    :total="total"
     default-page-size="10"
     v-model:current-page="currentPage"
     />
    <!-- <el-pagination v-model:current-page="currentPage" v-model:page-size="limitNum" :page-sizes="pageSizes"
        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" /> -->
</template>

<script setup lang="ts">
import { reactive, ref } from "vue"
import type { IGoods } from "@/myTypes"
import type {
    UploadInstance,
    UploadProps,
    UploadRawFile,
    UploadFile,
} from "element-plus";
import { getsearchProApi, getCategoryApi } from "@/api/Goodslist"
import {
    excelExportUseJson,
    excelImport,
} from "../../util/excelTools.js"

const searchData = reactive({
    category: "",
    search: "",
});


const value = ref<string>('')

let options = reactive([])


const goodsList = reactive<Array<IGoods>>([
    {
        proid: "pro_dd3bc452-3f9e-4033-b007-4ddf791b4529",
        category: "口红",
        brand: "Dior迪奥",
        proname: "【官方正品】全新Dior迪奥烈艳蓝金唇膏传奇新色丝绒999 720",
        originprice: 356,
        sales: 44460,
        stock: 50000,
        issale: 1,
        isrecommend: 1,
        discount: 8,
        isseckill: 1,
        img1: "https://ts1.cn.mm.bing.net/th/id/R-C.40b20d7f957acd21816d8f2f4b6b281c?rik=t84hzwSRHZl76Q&riu=http%3a%2f%2fimg.keaitupian.cn%2fuploads%2f2020%2f07%2f27%2fvtba42j0ldr.jpg&ehk=koTk1dC89ASqZg8odeoC%2fVMcuv9IEfaf7JR0heevIpE%3d&risl=&pid=ImgRaw&r=0"
    },
]);

// 分页
const total = ref('')
// 页面刷新/点击按钮加载数据
const getGoodsList = () => {
    getsearchProApi(searchData).then(res => {
        if (res.data.code == "200") {
            goodsList.length = 0;
            goodsList.push(...res.data.data);
            total.value = res.data.data.length
        }
    })
}
getGoodsList()


// 页面刷新给下拉的分类数据
const getCategory = () => {
    getCategoryApi().then(res => {
        if (res.data.code == "200") {
            let result: {}[] = []
            res.data.data.forEach((item: any) => {
                let obj = {}
                result.push(obj)
            });
            // options.push(...result)
        }
    })
}
getCategory()




// 点击下拉将数据赋值给searchData中
const changesel = () => {
    // console.log(value.value);
    searchData.category = value.value
}


// 清除数据
const removelist = () => {
    searchData.category = ''
    searchData.search = ''
    value.value = ''
    getGoodsList()
}

// excel导出：
const excelToUseJson = () => {
    //参数：
    // data：数据，是json数组格式
    // headers：表头
    // filename：导出的文件名
    excelExportUseJson(
        goodsList,
        {
            proid: "商品编号",
            category: "分类",
            brand: "品牌",
            proname: "商品名称",
            originprice: "原价",
            sales: "销量",
            img1: "图片"
        },
        "goods"
    );
};

const upload = ref<UploadInstance>();

const handleExceed: UploadProps["onExceed"] = (files) => {
    console.log("handleExceed");

    upload.value!.clearFiles();

    const file = files[0] as UploadRawFile;

    upload.value!.handleStart(file);
};

const changeFn = (file: UploadFile) => {
    console.log("changeFn");

    excelImport(file.raw as File).then((arr: any) => {
        console.log("arr", arr);
        goodsList.length = 0;
        // goodsList.push(...arr);
        arr.forEach((item: any) => {
            goodsList.push({
                "proid": item["商品编号"],
                "proname": item["商品名称"],
                "category": item["分类"],
                "brand": item["品牌"],
                "img1": item["图片"]
            });
        })

    });

};


// 分页器
const currentPage = ref(1)
// const total = ref<number>(0);
// const pageSizes = reactive<Array<number>>([10, 20, 30, 40, 50, 60, 70, 80, 90, 100])
// const count = ref<number>(1);
// const limitNum = ref<number>(10);


// const handleSizeChange = (val: number) => {
//     console.log(val);
//     limitNum.value = val;
//     getGoodsList();

// }
// const handleCurrentChange = (val: number) => {
//     console.log(val);
//     count.value = val;
//     getGoodsList();
// }


</script>

<style scoped>
.example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
}

.el-select {
    width: 500px !important;
    margin-bottom: 20px !important;
}

/* /deep/.el-form-item__content{
    height: 30px;
} */
.el-table--fit {
    height: 300px;
}
</style>